// import React, { useState, useEffect } from 'react';
// import { NotionRenderer } from 'react-notion';

// function NotionPage() {
//   const [blockMap, setBlockMap] = useState(null);

//   useEffect(() => {
//     // 你可以使用 Notion 的 API 获取 blockMap 数据，或者使用其他第三方服务如 Notion's public API 或 notion-api-worker
//     fetch('https://notion-api.splitbee.io/v1/page/readme-37689a9f45eb4620a50d787b2e4e4ab8')
//       .then(response => response.json())
//       .then(data => setBlockMap(data))
//       .catch(error => console.error('Error fetching Notion data:', error));
//   }, []);

//   return (
//     <div>
//       {blockMap ? <NotionRenderer blockMap={blockMap} /> : <p>Loading...</p>}
//     </div>
//   );
// }

// export default NotionPage;


import React, { useState, useEffect } from 'react';
import { NotionRenderer } from 'react-notion-x';
import { Spin } from 'antd';
function NotionPageDisplay({ pageId }) {
  const [recordMap, setRecordMap] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const filename = `recordMap-${pageId}.json`;
      const response = await fetch(filename);
      const data = await response.json();
      setRecordMap(data);
    }

    fetchData();
  }, [pageId]);

  return (
    <>
      <Spin spinning={!recordMap}>
        {recordMap ?
          <NotionRenderer recordMap={recordMap} fullPage={false} darkMode={false} />
          : <p className='text-center font-bold m-10 text-lg'>Loading...</p>
        }
      </Spin>
    </>)
}

export default NotionPageDisplay;

